<template>
  <client-only>
  <div class="Page Confirm">
    <div class="Title">
      <h1 class="fl f18">订单确认</h1>
      <!-- <img src="~/assets/img/cart_setp2.png" class="fr"> -->
      <div class="clear"></div>
    </div>
    <form name="flowForm" id="flowForm" method="post" action="">
      <table class="GoodList">
        <tbody>
        <tr>
          <th class="name">商品</th>
          <th class="price">原价</th>
          <th class="priceNew">价格</th>
        </tr>
        </tbody>
        <tbody>
       <tr>
          <td colspan="3" class="teacher">讲师：{{order.teacherName}}</td>
        </tr>
        <tr class="good">
          <td class="name First">
            <a target="_blank" :href="`/course/${order.courseId}`">
              <img :src="order.courseCover" :alt="order.courseTitle"></a>
            <div class="goodInfo">
              <input type="hidden" class="ids ids_14502" value="14502">
              <a target="_blank" :href="`/course/${order.courseId}`">{{order.courseTitle}}</a>
            </div>
          </td>
          <td class="price">
            <p>￥<strong>{{order.totalFee}}</strong></p>
          </td>
          <td class="red priceNew Last">￥<strong>{{order.totalFee}}</strong></td>
        </tr>
        <tr>
          <td class="Billing tr" colspan="3">
            <div class="tr">
              <p>共 <strong class="red">1</strong> 件商品，合计<span
                class="red f20">￥<strong>{{order.totalFee}}</strong></span></p>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <div class="Finish">
        <div class="fr" id="AgreeDiv">
          <el-checkbox v-model="agrre">我已阅读并同意<a href="javascript:;">《厚溥云课堂购买协议》</a></el-checkbox>
        </div>
        <div class="clear"></div>
        <div class="Main fl">
          <div class="fl">
            <a :href="`/course/${order.courseId}`">返回课程详情页</a>
          </div>
          <div class="fr">
            <p>共 <strong class="red">1</strong> 件商品，合计<span class="red f20">￥<strong
              id="AllPrice">{{order.totalFee}}</strong></span></p>
          </div>
        </div>
        <input name="score" value="0" type="hidden" id="usedScore">
        <el-button :disabled="!agrre"  type="danger" id="submitPay" @click="goPay">去支付</el-button>
        <div class="clear"></div>
      </div>
    </form>
  </div>
  </client-only>
</template>

<script>
import orderApi from '/api/order'
export default {
data() {
    return {
        order:{},//订单信息
        agrre:true,//是否同意协议
    }
},    
created(){
    this.initOrder()
},
methods:{
   initOrder(){
    // 初始化订单信息
    orderApi.showInfo(this.$route.params.cid).then(res=>{
        this.order=res.data
    })
   },
  //  去支付
   goPay(){
    //  调用创建订单API，生成订单
    orderApi.createOrder(this.$route.params.cid).then(res=>{
      // 跳转至个人中心
      this.$router.push("/order/list")
    })
   }
}
}
</script>